useGetTokenMetadata

Hook para obtener metadatos específicos de tokens individuales dentro de un contrato

Importar

import { useGetTokenMetadata } from '@0xsequence/hooks'

Uso

import { useGetTokenMetadata } from '@0xsequence/hooks'

// Example 1: Single NFT Details
function NFTDetails({ contractAddress, tokenId }) {
  const {
    data: tokensMetadata,
    isLoading,
    isError
  } = useGetTokenMetadata({
    chainID: "1", // Ethereum mainnet
    contractAddress, 
    tokenIDs: [tokenId]
  })

  if (isLoading) return <div>Loading NFT details...</div>
  if (isError) return <div>Error loading NFT</div>

  const nft = tokensMetadata?.[0]
  if (!nft) return <div>NFT not found</div>

  return (
    <div className="nft-details">
      <img 
        src={nft.image}
        alt={nft.name}
        className="nft-image"
      />
      <div className="nft-info">
        <h1>{nft.name}</h1>
        <p>{nft.description}</p>
        
        <div className="attributes-grid">
          {nft.attributes?.map(attr => (
            <div key={attr.trait_type} className="attribute-card">
              <span className="trait-type">{attr.trait_type}</span>
              <span className="trait-value">{attr.value}</span>
              {attr.rarity && (
                <span className="trait-rarity">{attr.rarity}%</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// Example 2: Batch NFT Collection Display
function NFTCollectionGrid({ contractAddress, tokenIds }) {
  const {
    data: tokensMetadata,
    isLoading,
    isError
  } = useGetTokenMetadata({
    chainID: "1",
    contractAddress,
    tokenIDs: tokenIds // Will automatically chunk into batches of 50
  })

  if (isLoading) return <div>Loading collection...</div>
  if (isError) return <div>Error loading collection</div>

  return (
    <div className="nft-grid">
      {tokensMetadata?.map(token => (
        <div key={token.tokenId} className="nft-tile">
          <img 
            src={token.image}
            alt={token.name}
            loading="lazy"
          />
          <div className="nft-tile-info">
            <h3>{token.name}</h3>
            {token.attributes && (
              <div className="trait-pills">
                {token.attributes.slice(0, 3).map(attr => (
                  <span key={attr.trait_type} className="trait-pill">
                    {attr.trait_type}: {attr.value}
                  </span>
                ))}
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  )
}

Tipo de retorno: UseQueryResult<TokenMetadata[]>

El hook retorna todas las propiedades de UseQueryResult de React Query con los metadatos de los tokens. Esta es la estructura detallada:

interface TokenMetadata {
    tokenId: string;
    source: string;
    name: string;
    description?: string;
    image?: string;
    video?: string;
    audio?: string;
    properties?: {
        [key: string]: any;
    };
    attributes: Array<{
        [key: string]: any;
    }>;
    image_data?: string;
    external_url?: string;
    background_color?: string;
    animation_url?: string;
    decimals?: number;
    updatedAt?: string;
    assets?: Array<Asset>;
    status: ResourceStatus;
    queuedAt?: string;
    lastFetched?: string;
}

Propiedades

data

TokenMetadata[] | undefined

Arreglo de objetos que contienen metadatos para cada token solicitado:

• tokenId: ID del token específico
• source: Fuente/origen de los metadatos del token (por ejemplo, “sequence”, “opensea”)
• name: Nombre del token específico (por ejemplo, “Bored Ape #1234”)
• description: Descripción del token específico
• image: URL de la imagen del token (proxy automático a través del servicio de imágenes)
• video: URL de video si el token tiene contenido en video
• audio: URL de audio si el token tiene contenido en audio
• properties: Propiedades adicionales de metadatos como pares clave-valor
• attributes: Arreglo de objetos de atributos para NFTs
• image_data: Datos SVG/imágenes en crudo si se proporcionan
• external_url: URL externa asociada al token
• background_color: Color de fondo en formato hexadecimal
• animation_url: URL para contenido animado
• decimals: Decimales del token (para tokens ERC1155 fungibles)
• updatedAt: Marca de tiempo ISO de la última actualización de metadatos
• assets: Arreglo de archivos de activos adicionales
• status: Estado actual de los metadatos (“READY”, “PENDING”, “ERROR”)
• queuedAt: Marca de tiempo ISO cuando el indexado de metadatos fue puesto en cola
• lastFetched: Marca de tiempo ISO de la última obtención exitosa

isLoading

boolean

Estado de carga para la obtención de datos.

isError

boolean

Estado de error que indica si la consulta falló.

error

Error | null

Cualquier error que ocurrió durante la obtención de datos.

Parámetros

El hook acepta dos parámetros:

args: GetTokenMetadataArgs

interface GetTokenMetadataArgs {
  chainID: string
  contractAddress: string
  tokenIDs: string[]
}

Parámetro	Type	Description
chainID	string	ID de cadena como string (por ejemplo, “1” para Ethereum mainnet)
contractAddress	string	Dirección del contrato del token/NFT
tokenIDs	string[]	Arreglo de IDs de tokens para obtener metadatos

options: HooksOptions

interface HooksOptions {
  disabled?: boolean
  retry?: boolean
}

Parámetro	Type	Description
disabled	boolean	(Opcional) Deshabilitar la consulta para que no se ejecute automáticamente
retry	boolean	(Opcional) Indica si se deben reintentar las consultas fallidas